<template>
  <div class="user-info">
    <el-form ref="formRef" :model="userForm" label-width="80px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="手机">
            <el-input v-model="userForm.username" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="入职时间">
            <el-date-picker v-model="userForm.correctionTime" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="员工头像">
        <!-- 引入全局注册的组件, 用于上传头像 -->
        <upload-img
          :src="userForm.staffPhoto"
          @upload-success="uploadPhotoSuccess"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" plain @click="cancleBack">取消</el-button>
        <el-button type="primary" plain @click="onSubmit">立即创建</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import { getUserSimpleDetailRequest, uploadUserSimpleDetailRequest } from '@/api/employees'
export default {
  data() {
    return {
      // 初始化表单数据
      userForm: {
        username: '',
        correctionTime: '',
        staffPhoto: ''
      }
    }
  },
  created() {
    this.getUserSimpleDetail() // 获取用户详细信息
  },
  methods: {
    // ^ ==================== 请求 ====================
    // 请求 - 获取用户详细信息
    async getUserSimpleDetail() {
      try {
        const res = await getUserSimpleDetailRequest(this.$route.query?.id || '')
        if (res.success) {
          this.userForm = res.data
        } else {
          console.log('获取用户详细信息失败')
        }
      } catch (error) {
        console.log('获取用户详细信息失败!', error)
      }
    },
    // 请求 - 更新用户详细信息
    async uploadUserSimpleDetail() {
      try {
        const res = await uploadUserSimpleDetailRequest(this.userForm)
        if (res.success) {
          this.$message.success('更新用户详细信息成功!')
          this.$router.back() // 更新成功, 回到上一页
        }
      } catch (error) {
        console.log('更新用户详细信息失败', error)
      }
    },
    // ^ ==================== 事件 ====================
    // 事件 - 取消, 路由回退
    cancleBack() {
      this.$router.back()
    },
    // 事件 - 创建角色
    onSubmit() {
      this.uploadUserSimpleDetail() // 更新角色详情
    },
    // 事件 - 头像上传成功, 将图片公网地址数据赋值给 staffPhoto
    uploadPhotoSuccess(src) {
      this.userForm.staffPhoto = src
    }
  }
}
</script>

<style>
</style>
